<template>
  <div class="detail-overlay" v-if="showDetail">
    <div class="detail-dialog">
      <div class="detail-header">
        <h3>店铺详情</h3>
        <button class="close-btn" @click="closeDetail">&times;</button>
      </div>
      <div class="detail-content">
        <!-- 选项卡导航 -->
        <div class="tabs-container">
          <div class="tab-item" :class="{ 'active': currentTab === 'basic' }" @click="currentTab = 'basic'"><i class="icon">&#9432;</i> 基础信息</div>
          <div class="tab-item" :class="{ 'active': currentTab === 'photos' }" @click="currentTab = 'photos'"><i class="icon">&#128247;</i> 照片</div>
          <div class="tab-item" :class="{ 'active': currentTab === 'records' }" @click="currentTab = 'records'"><i class="icon">&#128221;</i> 核查记录</div>
        </div>

        <!-- 基础信息 -->
        <div class="tab-content" v-if="currentTab === 'basic'">
          <div class="info-grid">
            <div class="info-row">
              <div class="info-label">店铺名称:</div>
              <div class="info-value">{{ currentVenue.store_name }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">ID:</div>
              <div class="info-value">{{ currentVenue.id }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">城区:</div>
              <div class="info-value">{{ currentVenue.area || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">所属街道:</div>
              <div class="info-value">{{ currentVenue.policeStation }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">店铺类型:</div>
              <div class="info-value">{{ currentVenue.type }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">地址类型:</div>
              <div class="info-value">{{ currentVenue.location_type }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">详细地址:</div>
              <div class="info-value">{{ currentVenue.address }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">经度:</div>
              <div class="info-value">{{ currentVenue.longitude }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">纬度:</div>
              <div class="info-value">{{ currentVenue.latitude }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">是否放心场所:</div>
              <div class="info-value">{{ currentVenue.reassured || '未定义' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">上报的放心场所:</div>
              <div class="info-value">{{ currentVenue.report || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">开业时间:</div>
              <div class="info-value">{{ currentVenue.open_time }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">停业说明:</div>
              <div class="info-value">{{ currentVenue.close_describe || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">营业执照:</div>
              <div class="info-value">{{ currentVenue.business_license || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">法人代表:</div>
              <div class="info-value">{{ currentVenue.legal_person || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">法人身份证:</div>
              <div class="info-value">{{ currentVenue.legal_person_id_card || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">法人前科:</div>
              <div class="info-value">{{ currentVenue.legal_person_criminal_record || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">法人联系电话:</div>
              <div class="info-value">{{ currentVenue.legal_person_phone || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">负责人:</div>
              <div class="info-value">{{ currentVenue.charge_name || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">负责人身份证:</div>
              <div class="info-value">{{ currentVenue.charge_id_card || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">负责人前科:</div>
              <div class="info-value">{{ currentVenue.charge_criminal_record || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">负责人联系电话:</div>
              <div class="info-value">{{ currentVenue.charge_phone || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">营利陪侍:</div>
              <div class="info-value">{{ currentVenue.escort || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">涉黄报警次数:</div>
              <div class="info-value">{{ currentVenue.yellow_alarm || '0' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">员工人数:</div>
              <div class="info-value">{{ currentVenue.staff_number || '0' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">监控数量:</div>
              <div class="info-value">{{ currentVenue.monitor_number || '0' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">包厢数量:</div>
              <div class="info-value">{{ currentVenue.private_room || '0' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">从业人员有无录入系统:</div>
              <div class="info-value">{{ currentVenue.employees_in_system || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">场所信息有无录入系统:</div>
              <div class="info-value">{{ currentVenue.store_info_in_system || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">是否国有资产:</div>
              <div class="info-value">{{ currentVenue.national_asset || '否' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">房租到期日期:</div>
              <div class="info-value">{{ currentVenue.rent_deadline || '无' }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">备注:</div>
              <div class="info-value">{{ currentVenue.remark || '无' }}</div>
            </div>
          </div>
        </div>

        <!-- 照片 -->
        <div class="tab-content" v-if="currentTab === 'photos'">
          <div class="photos-container">
            <div v-if="isLoading" class="loading-state">
              <div class="spinner"></div>
              <span>加载中...</span>
            </div>
            <div v-else-if="loadError" class="error-state">
              <div class="error-message">{{ loadError }}</div>
              <button class="retry-btn" @click="loadImages">重试</button>
            </div>
            <div v-else-if="currentVenueImages && currentVenueImages.length > 0" class="carousel">
              <button class="carousel-btn prev-btn" @click="prevImage">&lt;</button>
              <div class="carousel-image-container">
                <img :src="currentVenueImages[currentPreviewIndex]" :alt="currentVenue.name + '图片'" class="carousel-image" :key="currentPreviewIndex">
              </div>
              <button class="carousel-btn next-btn" @click="nextImage">&gt;</button>
              <div class="carousel-indicators">
                <span v-for="(img, index) in currentVenueImages" :key="index" class="indicator" :class="{ 'active': index === currentPreviewIndex }" @click="goToImage(index)"></span>
              </div>
            </div>
            <div v-else class="no-data">暂无照片</div>
          </div>
        </div>

        <!-- 核查记录 -->
        <div class="tab-content" v-if="currentTab === 'records'">
          <div v-if="checkRecords && checkRecords.length > 0">
            <div class="record-item" v-for="(record, index) in checkRecords" :key="index">
              <div class="record-header">
                <div class="record-title">{{ record.title }}</div>
                <div class="record-date">{{ record.date }}</div>
              </div>
              <div class="record-content">{{ record.content }}</div>
              <div class="record-footer">
                <div class="record-status">{{ record.status }}</div>
                <div class="record-operator">{{ record.operator }}</div>
              </div>
            </div>
          </div>
          <div v-else class="no-data">暂无核查记录</div>
        </div>
      </div>
      <div class="detail-actions">
        <button class="close-btn" @click="closeDetail">关闭</button>
      </div>
    </div>
  </div>


</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import { ossUploadFolder } from '../utils/config.js';
import { getFileUrl } from '../utils/ossUpload.js';

const props = defineProps({
  showDetail: {
    type: Boolean,
    required: true
  },
  currentVenue: {
    type: Object,
    required: true
  },
  checkRecords: {
    type: Array,
    default: () => []
  }
});

// 显式解构currentVenue
const { currentVenue } = props;

const emits = defineEmits(['close']);

const currentTab = ref('basic');
const currentVenueImages = ref([]);
const currentPreviewIndex = ref(0);

// 在组件挂载时加载图片
onMounted(async () => {
  if (currentTab.value === 'photos') {
    await loadImages();
  }
});

// 监听选项卡变化，当切换到照片选项卡时加载图片
watch(currentTab, async (newTab) => {
  if (newTab === 'photos') {
    await loadImages();
  }
});

// 加载图片的函数
const loadImages = async () => {
  isLoading.value = true;
  loadError.value = '';
  currentVenueImages.value = [];

  try {
    // 确保currentVenue存在
    if (!currentVenue) {
      loadError.value = '无法获取场地信息';
      return;
    }

    // 过滤有效的图片URL
    const photoNames = Array.isArray(currentVenue.photoName) ? currentVenue.photoName : typeof currentVenue.photoName === 'string' ? currentVenue.photoName.split(',').map(url => url.trim()) : [];
    const rawUrls = photoNames.filter(url => 
      typeof url === 'string' && url.trim() !== '' && /\.(png|jpg|jpeg)$/i.test(url)
    );

    if (rawUrls.length === 0) {
      loadError.value = '没有找到有效的图片URL';
      return;
    }

    // 获取签名URL
    currentVenueImages.value = await Promise.all(
      rawUrls.map(async (url) => {
        try {
          return await getFileUrl(url);
        } catch (error) {
          console.error(`获取图片${url}签名失败:`, error);
          return null;
        }
      })
    ).then(urls => urls.filter(Boolean));

    if (currentVenueImages.value.length === 0) {
      loadError.value = '所有图片URL签名失败';
      return;
    }

    currentPreviewIndex.value = 0;
  } catch (error) {
    console.error('加载图片失败:', error);
    loadError.value = `加载图片失败: ${error.message}`;
  } finally {
    isLoading.value = false;
  }
}

const closeDetail = () => {
  emits('close');
};

// 添加加载状态和错误处理
const isLoading = ref(false);
const loadError = ref('');

const prevImage = () => {
  currentPreviewIndex.value = (currentPreviewIndex.value - 1 + currentVenueImages.value.length) % currentVenueImages.value.length;
};

const nextImage = () => {
  currentPreviewIndex.value = (currentPreviewIndex.value + 1) % currentVenueImages.value.length;
};

const goToImage = (index) => {
  currentPreviewIndex.value = index;
};
</script>

<style scoped>
.detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.detail-dialog {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  border: 1px solid rgba(0, 240, 255, 0.3);
  width: 800px;
  max-width: 90%;
  max-height: 90vh;
  color: #e2e8f0;
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex;
  flex-direction: column;
}

.detail-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

detail-header h3 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.close-btn {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #00f0ff;
}

.detail-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

detail-content::-webkit-scrollbar {
  width: 6px;
}

detail-content::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

detail-content::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 10px;
}

detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

.tabs-container {
  display: flex;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
}

.tab-item.active {
  color: #00f0ff;
  border-bottom: 2px solid #00f0ff;
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.tab-item:hover:not(.active) {
  background: rgba(30, 41, 59, 0.5);
}

.icon {
  font-size: 16px;
}

.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-bottom: 15px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.1);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: auto;
  color: #00f0ff;
  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5);
  font-size: 14px;
  margin-bottom: 5px;
}

.info-value {
  flex: 1;
  word-break: break-word;
  font-size: 14px;
  color: #e2e8f0;
  padding: 2px 0;
}

.photos-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #00f0ff;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 240, 255, 0.3);
  border-top: 3px solid #00f0ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态样式 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #ff4d4f;
}

.error-message {
  margin-bottom: 15px;
  text-align: center;
  max-width: 80%;
}

.retry-btn {
  padding: 6px 16px;
  background: rgba(255, 77, 79, 0.2);
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: rgba(255, 77, 79, 0.3);
  box-shadow: 0 0 8px rgba(255, 77, 79, 0.3);
}

.record-item {
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
  transition: all 0.3s ease;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.1);
}

.record-title {
  font-weight: bold;
  color: #00f0ff;
  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5);
  font-size: 14px;
}

.record-date {
  color: rgba(226, 232, 240, 0.7);
  font-size: 12px;
}

.record-content {
  margin-bottom: 10px;
  line-height: 1.5;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.7);
}

.record-status {
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.2);
  color: #00f0ff;
  font-size: 12px;
  display: inline-block;
}

.no-data {
  text-align: center;
  padding: 30px 0;
  color: rgba(226, 232, 240, 0.5);
}

.detail-actions {
  padding: 15px 20px;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  justify-content: center;
}

detail-actions .close-btn {
  width: 100px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #e2e8f0;
}

detail-actions .close-btn:hover {
  background: rgba(30, 41, 59, 1);
}

/* 图片预览模态框样式 */
.preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.preview-modal {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  border: 1px solid rgba(0, 240, 255, 0.3);
  width: 800px;
  max-width: 90%;
  max-height: 90vh;
  color: #e2e8f0;
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow: auto;
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #e2e8f0;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  color: #00f0ff;
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.carousel-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(15, 23, 42, 0.5);
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.carousel-indicators {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}

.no-images {
  text-align: center;
  padding: 30px 0;
  color: rgba(226, 232, 240, 0.5);
}
</style>